<template>
    <div class="Searchresults">
        <div class="head"> <i class="yo-ico" @click="clickBackHandle">&#xe60c;</i><input type="text" placeholder="马甲线"></div>
        <div class="relatedCourses">相关课程</div>
        <ul class="courses">
            <li  @click="clickHandle">
                <div class="courseImg" ><img src="../../assets/img/Search/1.jpg" alt=""></div>
                <div class="content">
                    <p>马甲线养成计划初级课程</p>
                    <div>
                        <img class="userImg" src="../../assets/img/Search/1.jpg" alt="">
                        <span>OMINGHBASS</span>
                    </div>
                </div>
            </li>
            <li  @click="clickHandle">
                <div class="courseImg" ><img src="../../assets/img/Search/1.jpg" alt=""></div>
                <div class="content">
                    <p>HIIT跑步跑出马甲线</p>
                    <div>
                        <img class="userImg" src="../../assets/img/Search/1.jpg" alt="">
                        <span>OMINGHBASS</span>
                    </div>
                </div>
            </li>
            <li v-for="a in arr" v-show="bool"  @click="clickHandle"> 
                <div class="courseImg" ><img src="../../assets/img/Search/1.jpg" alt=""></div>
                <div class="content">
                    <p>HIIT跑步跑出马甲线</p>
                    <div>
                        <img class="userImg" src="../../assets/img/Search/1.jpg" alt="">
                        <span>OMINGHBASS</span>
                    </div>
                </div>
            </li>
        </ul>
        <div class="clickCourses" @click="clickFold">点击查看全部<span>36</span>个相关课程</div>
        <div class="relatedCourses">相关用户</div>
        <ul class="users">
            <li  @click="clickHandleUsers">
                <div class="courseImg" ><img src="../../assets/img/Search/1.jpg" alt=""></div>
                <div class="content">
                    <p>UPDATE设计研究院</p>
                    <div>
                        <span>1.58w关注</span>
                    </div>
                </div>
            </li>
            <li @click="clickHandleUsers">
                <div class="courseImg" ><img src="../../assets/img/Search/1.jpg" alt=""></div>
                <div class="content">
                    <p>OMI.DASDSA</p>
                    <div>
                        <span>12.3w关注</span>
                    </div>
                </div>
            </li>
            <li v-for="a in arr2" v-show="bool2" @click="clickHandleUsers">
                <div class="courseImg" ><img src="../../assets/img/Search/1.jpg" alt=""></div>
                <div class="content">
                    <p>OMI.DASDSA</p>
                    <div>
                        <span>12.3w关注</span>
                    </div>
                </div>
            </li>
        </ul>
        <div class="clickUsers" @click="clickFold2">点击查看全部<span>12</span>个相关用户</div>
        
    </div>
</template>

<script>
    import DynamicPag from "../dynamicPag/DynamicPag"
    export default ({
        components:{
            DynamicPag
        },
        data(){
            return {
                bool:false,
                bool2:false,
                arr:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
                arr2:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
            }
        },
        methods:{
            clickBackHandle(){
                this.$router.back();
            },
            clickHandle(){
                this.$router.push("/search/allcourses");
            },
            clickHandleUsers(){
                this.$router.push("/search/allusers")
            },
            clickFold(){
                this.bool=true;
                document.querySelector(".clickCourses").innerHTML="已全部展开36个课程"                
            },
            clickFold2(){
                this.bool2=true;
                document.querySelector(".clickUsers").innerHTML="已全部展开12个相关用户"

            }
        }
    })
</script>

<style lang='stylus' scoped>
    .Searchresults
        display flex
        flex-direction column
        width 100%
        height 6.3rem
        padding 0 .2rem
        margin-top .3rem
        overflow-y scroll
        position relative

        .head
            height .5rem
            line-height .4rem
            margin-bottom .2rem
            position sticky 
            top .01rem
            left .3rem
            i 
                padding 0 .1rem 0 .01rem
                font-weight 900
            input 
                border-radius .2rem
                border none
                background-color #f2f2f2
                height .3rem
                width 89%
                padding-left 3%

            input::-webkit-input-placeholder
                font-size .12rem
                color #000
                font-weight 100
    .relatedCourses
        width 100%
        height .3rem
        line-height .3rem
        display flex
        justify-content space-between
        font-size .16rem  

    .courses
        width 100%
        
        li
            width 100%
            height .9rem
            margin-bottom 2%
            display flex
            .courseImg
                width 35%
                height .7rem
                img 
                    width 100%
                    height 100%
            .content
                
                padding-left 5%
                p
                    font-size .16rem
                    font-weight 600
                    margin-bottom 3%
                div
                    span 
                        font-size 12px
                        color #b9bdbd
                    img 
                        width 5%
                        height 5%
        
    .clickCourses
        font-size .12rem
        color #ccc
        text-align center
        margin-bottom 5%

    .users
        width 100%
        
        li
            width 100%
            height .8rem
            display flex
            .courseImg
                width 15%
                height .5rem
                img 
                    border-radius .5rem
                    width 100%
                    height .5rem
            .content
                
                padding-left .2rem
                p
                    font-size .16rem
                    margin-bottom .01rem
                div
                    span 
                        font-size .12rem
                        color #b9bdbd

    .clickUsers
        width 100%
        height .2rem
        font-size .12rem
        color #cccccc
        text-align center

    
</style>